@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,700|Roboto+Slab:700&subset=latin,latin-ext);
#page { background: #eee url('data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%221920px%22%20height%3D%22500px%22%20viewBox%3D%220%200%201920%20500%22%20overflow%3D%22inherit%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23282828%22%20opacity%3D%220.05%22%20points%3D%220%2C0%201920%2C0%201920%2C400%20960%2C500%200%2C400%20%22%2F%3E%3C%2Fsvg%3E') 50% -100px no-repeat; position: relative; padding: 10px 0 60px 0; margin: 0; font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 18px; color: #394249; }

#page a img { border: none; }
#page>h1, #page>p { width: calc(100% - 80px); min-width: 300px; max-width: 1200px; margin: 0 auto; padding: 0 40px; text-align: center; }
#page>h1 { font-family: "Roboto", serif; font-size: 45px; font-weight: 700; margin: 50px auto; line-height: 1; }
#page>p { max-width: 960px; margin: 50px auto; }
#page>p>a { font-weight: 700; font-size: 12px; text-transform: uppercase; text-decoration: none; color: #333; cursor: pointer; margin: 0 10px; }
#page>p>a[href="/sandbox"], #page>p+p>a[href="#"] { position: relative; display: inline-block; width: 300px; color: #fff; background: #2ad9d6; border-radius: 4px; margin: 0 20px; padding: 15px; text-decoration: none; text-align: center; font-size: 16px; font-weight: 700; text-shadow: none;}
#page>p>a[href="/sandbox"]:hover, #page>p+p>a[href="#"]:hover  { color: #333; }
#page>p+p { margin: 80px auto 50px auto; font-size: 12px; font-weight: 700; }
#page>p+p>a { text-transform: none; }
#page>ul.description+p>a:hover { color: #2ad9d6; }

#page ul.description { list-style: none; max-width: 960px; margin: auto; padding: 0; }
#page ul.description li { margin: 10px 0; padding: 0; position: relative; text-align: center; }
#page ul.description+p { text-align: center;}

#video-div { z-index: 20; display: block; position: fixed; width: 960px; height: 600px; top: 50%; left: 50%; margin-top: -305px; margin-left: -485px; padding: 3px; background: #333; border-radius: 5px; border: 2px solid #fff; box-shadow: 8px 8px 16px rgba(0,0,0,0.7), 0 0 0 1000px rgba(0,0,0,0.4); }
#video-div a { display: inline-block; float: right; position: relative; padding: 3px 7px 7px 3px; width: 20px; height: 20px; line-height: 20px; top: -20px; right: -20px; margin: 0 0 -33px -30px; content: "+"; text-align: center; text-decoration: none; font-family: Verdana, sans-serif; font-size: 30px; color: #000; background: #fff; border: 2px solid #000; border-radius: 50%; }

#page ul.templates { font-size: 0; position: relative; text-align: center; list-style: none; display: block; margin: 0 auto; padding: 0;}
#page ul.templates li { font-size: 20px; background: #fff; position: relative; text-align: center; display: inline-block; width: 270px; padding: 9px; margin: 10px; border: 1px solid #ddd; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); vertical-align: top; }
#page ul.templates li:hover { background: #2ad9d6; cursor: pointer; border-color: #ccc; box-shadow: 0 1px 8px rgba(0,0,0,0.3); } 
#page ul.templates li a { color: #000; text-decoration: none; margin: 10px 0 20px 0; font-weight: 300; }
#page ul.templates li h4 { margin: 10px 0 20px 0; font-weight: 300; }
#page ul.templates li img { width: 100%; }
#page ul.templates li:hover a { color: #fff; }

#page:before { content: " Free \A Beta"; white-space: pre; display: block; position: absolute; width: 80px; height: 60px; border: 10px solid #fff; border-radius: 50%; background: #2ad9d6; color: #fff; font-size: 25px; font-weight: 700; line-height: 20px; text-align: center; margin: 0 0 0 470px; padding-top: 20px; left: 50%; top: -10px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); }

#page>a.tnw { position: absolute; top: 250px; left: 50%; margin: 0 0 0 -560px; width: 105px; height: 105px; text-align: center; background: #fff; border: 10px solid #fff; border-radius: 50%; -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); -o-transform: rotate(7deg); transform: rotate(7deg); }
#page>a.tnw img { position: relative; width: 95px; top: -8px; }
#page>a.tnw:hover { box-shadow: 3px 3px 6px rgba(0,0,0,0.2); }